<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Search</title>
    <style>
        .content{
            width:500px;
            margin:40px auto;
        }
        .search{
            width: 400px;
            overflow: hidden;

        }

        .show{
            width: 302px;
            height: 300px;
            border: 1px solid #ccc;
            padding-left: 10px;
            display: none;
        }
        .show p{
            font-size: 12px;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="search">
        <input type="text" id="myinput" placeholder="请输入名字">
        <input type="submit" id="sub">
    </div>
    <div class="show" id="show">
        <!-- <p>哈哈哈</p>
        <p>哈哈哈</p> -->
    </div>
</div>
<script>
    let targets = ['关之琳 980元','周慧敏 199元','周海媚 299元','邱淑贞 599元','徐睿 299元','范冰冰 99元','李冰冰 399元','王茜 899元'];
    let input = document.getElementById('myinput');
    let show = document.getElementById('show');
    input.onkeyup=function () {
        show.style.display = 'block';
        let str = '';
        targets.forEach((item)=>{
            let res = item.indexOf(input.value);
            if (res != -1) {
                str+='<p>'+item+'</p>'
            }
        })

        console.log(str);
        if (!input.value || !str) {
            show.innerHTML='<p>No result</p>'
        }else {
            show.innerHTML=str
        }


        input.onblur=function () {
            show.style.display = 'none';
            input.value=''
        }

    }
</script>
</body>
</html>